<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>API代理转发工具</title>
    <link rel="stylesheet" href="options.css" />
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
      }

      body {
        background: #f5f5f5;
        margin: 0;
        padding: 0;
      }

      .logs-controls {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
      }

      .log-detail-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
      }

      .logs-list {
        overflow: auto;
      }

      .log-detail-actions {
        display: flex;
        justify-content: flex-end;
      }

      .form-actions {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start;
        gap: 8px;
      }

      .cookie-manager-content {
        padding-left: 20px;
      }

      .cookie-btns {
        display: flex;
        gap: 8px;
      }

      .cookie-manager-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 18px;
        background: #252526;
        border-bottom: 1px solid #3e3e42;
      }

      .cookie-input-group {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 导航栏 -->
      <div class="navbar">
        <h1>🔄 API代理转发工具</h1>
        <div class="nav-buttons">
          <button class="nav-btn" data-tab="rules">规则</button>
          <button class="nav-btn" data-tab="logs">日志</button>
          <button class="nav-btn" data-tab="settings">设置</button>
        </div>
      </div>

      <!-- 标签页内容 -->
      <div class="content">
        <!-- 规则标签页 -->
        <div id="rules-tab" class="tab-content active">
          <div class="section-header">
            <h2>转发规则管理</h2>
            <div class="stats">
              <span id="rule-count">规则: 0</span>
              <span id="enabled-count">启用: 0</span>
            </div>
          </div>

          <!-- 添加新规则按钮 -->
          <div class="action-buttons">
            <button id="add-rule-btn" class="btn btn-primary">
              + 添加新规则
            </button>
            <button id="import-rules-btn" class="btn btn-secondary">
              导入规则
            </button>
            <button id="export-rules-btn" class="btn btn-secondary">
              导出规则
            </button>
          </div>

          <!-- 规则列表 -->
          <div id="rules-list" class="rules-list">
            <!-- 规则将在此动态添加 -->
          </div>

          <!-- 规则编辑面板 -->
          <div id="rule-editor" class="editor-panel" style="display: none">
            <div class="editor-header">
              <h3 id="editor-title">编辑规则</h3>
              <button id="close-editor" class="close-btn">✕</button>
            </div>

            <div class="editor-content">
              <!-- 基本信息 -->
              <div class="form-group">
                <label for="rule-name">规则名称 *</label>
                <input
                  type="text"
                  id="rule-name"
                  placeholder="例如: 测试环境到生产环境"
                  required
                />
              </div>

              <div class="form-row">
                <div class="form-group">
                  <label for="source-pattern">源 URL 模式 * (正则表达式)</label>
                  <input
                    type="text"
                    id="source-pattern"
                    placeholder="例如: https://test\.example\.com/(.*)"
                    required
                  />
                  <small>支持正则表达式，用于匹配要转发的 URL</small>
                </div>

                <div class="form-group">
                  <label for="target-url">目标 URL *</label>
                  <input
                    type="text"
                    id="target-url"
                    placeholder="例如: https://api.example.com/$1"
                    required
                  />
                  <small>$1 代表正则表达式中的第一个捕获组</small>
                </div>
              </div>

              <div class="form-row">
                <div class="form-group">
                  <label for="rule-method">请求方法</label>
                  <select id="rule-method">
                    <option value="ALL">所有方法</option>
                    <option value="GET">GET</option>
                    <option value="POST">POST</option>
                    <option value="PUT">PUT</option>
                    <option value="DELETE">DELETE</option>
                    <option value="PATCH">PATCH</option>
                  </select>
                </div>

                <div class="form-group">
                  <label for="rule-desc">规则描述</label>
                  <input
                    type="text"
                    id="rule-desc"
                    placeholder="可选的规则描述"
                  />
                </div>
              </div>

              <!-- Cookie 配置 -->
              <div class="form-group">
                <div class="toggle-group">
                  <span class="toggle-label">启用 Cookie 管理</span>
                  <button
                    type="button"
                    id="enable-cookies"
                    class="toggle-switch"
                  ></button>
                </div>
              </div>

              <div
                id="cookie-settings"
                style="display: none; margin-bottom: 16px"
              >
                <div class="form-group">
                  <div class="toggle-group">
                    <span class="toggle-label">自动收集目标域名的 Cookie</span>
                    <button
                      type="button"
                      id="auto-cookies"
                      class="toggle-switch enabled"
                    ></button>
                  </div>
                </div>
                <div class="cookie-btns">
                  <button
                    id="manage-cookies-btn"
                    class="btn btn-secondary"
                  >
                    管理 Cookie
                  </button>
                  <button id="refresh-cookies-btn" class="btn btn-secondary">
                    刷新 Cookie
                  </button>
                </div>
              </div>

              <!-- Cookie 管理器 -->
              <div
                id="cookie-manager"
                class="cookie-manager"
                style="display: none"
              >
                <div class="cookie-manager-header">
                  <h4>Cookie 管理</h4>
                  <button id="close-cookie-manager" class="close-btn">✕</button>
                </div>

                <div class="cookie-manager-content">
                  <div class="cookie-section">
                  <div class="form-group">
                    <label for="cookie-textarea">Cookie 列表 (格式: key1=value1; key2=value2;)</label>
                    <textarea
                      id="cookie-textarea"
                      placeholder="例如: username=admin; token=123456;"
                      rows="5"
                      style="width: 100%; margin-bottom: 8px;"
                    ></textarea>
                    <button id="add-cookie-btn" class="btn btn-primary">
                      保存 Cookie
                    </button>
                  </div>
                </div>
                </div>
              </div>

              <!-- 自定义 Headers -->
              <div class="form-group">
                <label>自定义请求头</label>
                <button id="add-header-btn" class="btn btn-secondary">
                  + 添加 Header
                </button>
                <div
                  id="headers-list"
                  class="headers-list"
                  style="margin-top: 8px"
                ></div>
              </div>

              <!-- 保存/取消按钮 -->
              <div class="form-actions">
                <button id="save-rule-btn" class="btn btn-primary">
                  保存规则
                </button>
                <button id="cancel-edit-btn" class="btn btn-secondary">
                  取消
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 日志标签页 -->
        <div id="logs-tab" class="tab-content">
          <div class="section-header">
            <h2>请求日志</h2>
            <div class="stats">
              <span id="total-logs">总计: 0</span>
              <span id="request-count">请求: 0</span>
              <span id="response-count">响应: 0</span>
            </div>
          </div>

          <div class="logs-controls">
            <input
              type="text"
              id="search-logs"
              placeholder="搜索 URL..."
              class="search-box"
            />
            <select id="filter-type" class="filter-select">
              <option value="">所有类型</option>
              <option value="request">请求</option>
              <option value="response">响应</option>
              <option value="error">错误</option>
            </select>
            <button id="clear-logs-btn" class="btn btn-secondary">
              清空日志
            </button>
            <button id="export-logs-btn" class="btn btn-secondary">
              导出日志
            </button>
          </div>

          <div class="logs-header">
            <div>TIME</div>
            <div>STATUS</div>
            <div>METHOD</div>
            <div>ORIGINAL URL</div>
          </div>

          <div id="logs-list" class="logs-list">
            <!-- 日志将在此动态添加 -->
          </div>

          <!-- 日志详情面板 -->
          <div id="log-detail" class="log-detail-panel" style="display: none">
            <div class="log-detail-header">
              <h3>日志详情</h3>
              <div class="log-detail-actions">
                <!-- <button id="copy-log-btn" class="btn btn-secondary">复制</button> -->
                <button id="close-log-detail" class="close-btn">✕</button>
              </div>
            </div>
            <div id="log-detail-content" class="log-detail-content"></div>
          </div>
        </div>

        <!-- 设置标签页 -->
        <div id="settings-tab" class="tab-content">
          <div class="section-header">
            <h2>设置</h2>
          </div>

          <div class="settings-group">
            <h3>全局设置</h3>
            <div class="form-group checkbox-group">
              <label>
                <input type="checkbox" id="global-enable" checked />
                <span>启用插件</span>
              </label>
              <small style="display: block; margin-top: 8px">
                ✓ 打开：插件在所有符合条件的页面生效<br />
                ✗ 关闭：插件在所有页面都不生效
              </small>
            </div>
          </div>

          <div class="settings-group">
            <h3>域名配置</h3>
            <div class="form-group">
              <label for="allowed-domains">允许的域名列表（每行一个域名）</label>
              <textarea
                id="allowed-domains"
                placeholder="例如：\nexample.com\nwww.example.com\n*.example.com"
                rows="5"
                style="width: 100%; margin-bottom: 8px;"
              ></textarea>
              <small>只有浏览器窗口URL的域名符合配置的域名才会注入脚本。支持通配符（如*.example.com），默认值为*表示允许所有域名，留空表示所有页面都不启用</small>
            </div>
          </div>

          <div class="settings-group">
            <h3>日志设置</h3>
            <div class="form-group">
              <label for="max-logs">最大日志条数</label>
              <input
                type="number"
                id="max-logs"
                min="100"
                max="10000"
                value="2000"
                style="width: 200px"
              />
              <small>当日志超过此限制时，会删除最旧的日志</small>
            </div>
            <div class="form-group checkbox-group">
              <label>
                <input type="checkbox" id="auto-clear-logs" />
                <span>日志达到上限时自动清空（保留最新的N条）</span>
              </label>
            </div>
          </div>

          <div class="settings-group">
            <h3>代理设置</h3>
            <div class="form-group checkbox-group">
              <label>
                <input type="checkbox" id="fallback-to-origin" checked />
                <span>代理失败时回源（向源地址请求）</span>
              </label>
              <small style="display: block; margin-top: 8px">
                ✓ 打开：代理接口失败后会自动请求源地址<br />
                ✗ 关闭：代理接口失败直接返回错误结果
              </small>
            </div>
          </div>

          <div class="settings-group">
            <h3>数据管理</h3>
            <button id="export-all-btn" class="btn btn-secondary">
              导出所有数据
            </button>
            <button id="import-all-btn" class="btn btn-secondary">
              导入数据
            </button>
            <button id="reset-btn" class="btn btn-danger">重置所有设置</button>
          </div>
        </div>
      </div>
    </div>

    <script src="options.js"></script>
  </body>
</html>
